<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">
<!-- 1. .stop修饰符的使用-->
  <div @click="divclick">
    aaaaa
    <button @click.stop="btnclick">按钮</button>
  </div>


<!--2.  .prevent修饰符的使用-->
<form action="baidu">
  <br>
  <!-- 在不使用.prevent的时候，点击提交按钮，就会自动进行提交-->
  <!--  <input type="submit" value="提交"  @click="submitclick">-->
  <!--  但是在添加.prevent之后，就会阻止默认行为，就会跳转到submitclick函数中，在方法中，开发者可以自己定义如何提交内容-->
  <input type="submit" value="提交"  @click.prevent="submitclick">
</form>


<!--3.	.{keycode | keyAlias }只当事件是从特定键触发的时候才触发回调，监听某个键盘的键的点击-->
<!--  此时只有点击enter按钮时，才会触发keyup这个方法-->
<input type="text" @keyup.enter="keyup()">


<!--4.  .once修饰符的使用-->
  <button @click.once="btn2click">按钮2</button>

</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            message:'你好呀'
        },
        methods:{
            divclick(){
                console.log("divclick");
            },
            btnclick(){
                console.log("btnclick");
            },
            submitclick(){
                console.log("submitclick");
            },
            keyup(){
                console.log("keyup");
            },
            btn2click(){
                console.log("btn2click");
            }
        }
    })
</script>

</body>
</html>